<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Banzhow</title>

    <!-- font-awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if IE 7]>
    <link href="css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!--[if lte IE 8]>
    <link href="css/ie8.css" rel="stylesheet">
    <![endif]-->
    <!--[if lte IE 7]>
    <link href="css/ie7.css" rel="stylesheet">
    <![endif]-->

    <!-- JavaScript -->
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>
    <!--[if lte IE 7]>
    <script type="text/javascript" src="js/boxsizing/jquery.boxsizing.js"></script> 
    <![endif]-->
    <script type="text/javascript" src="js/banzhow.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="index.html">Banzhow</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Portfolio <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio-1-col.html">1 Column Portfolio</a></li>
                <li><a href="portfolio-2-col.html">2 Column Portfolio</a></li>
                <li><a href="portfolio-3-col.html">3 Column Portfolio</a></li>
                <li><a href="portfolio-item.html">Single Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Blog <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="blog-home-1.html">Blog Home</a></li>
                <li><a href="blog-post.html">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Other Pages <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="full-width.html">Full Width Page</a></li>
                <li><a href="sidebar.html">Sidebar Page</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="404.html">404</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

    <div class="section-header">
      <div class="container">
        <div class="row">

          <div class="col-lg-12">
            <h1 class="page-header">Blog</h1>
          </div>

        </div>
      </div> <!-- /.container -->
    </div> <!-- /.section-colored -->

    <div class="container container-int">
      
      <ol class="breadcrumb">
        <li><a href="index.html">Home</a></li>
        <li class="active">Blog</li>
      </ol>

      <div class="row">

        <div class="col-md-8 col-sm-8">

          <div class="post">
            <h2 class="post-title"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h2>
            <p class="post-meta">
              <i class="fa fa-calendar-o first"></i> January 03, 2013
              <i class="fa fa-user"></i> Admin
              <i class="fa fa-comment"></i> <a href="#">10 comments</a>
            </p>
            <a href="blog-post.html" class="img-post">
              <img src="img/post1.png" alt="post 1" class="img-responsive">
            </a>
            <p>Vestibulum pulvinar lacus eget quam tempor, ultrices venenatis enim fermentum. Suspendisse in tellus sed metus auctor consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tincidunt ut quam non dapibus.</p>
            <a class="btn btn-primary" href="blog-post.html">Read More <i class="fa fa-angle-right"></i></a>
          </div><!-- /.post -->


          <div class="post">
            <h2 class="post-title"><a href="blog-post.html">Donec consectetur dui ipsum, in mattis dui cursus vitae</a></h2>
            <p class="post-meta">
              <i class="fa fa-calendar-o first"></i> January 03, 2013
              <i class="fa fa-user"></i> Admin
              <i class="fa fa-comment"></i> <a href="#">8 comments</a>
            </p>
            <a href="blog-post.html" class="img-post">
              <img src="img/post2.png" alt="post 2" class="img-responsive">
            </a>
            <p>Vestibulum pulvinar lacus eget quam tempor, ultrices venenatis enim fermentum. Suspendisse in tellus sed metus auctor consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tincidunt ut quam non dapibus.</p>
            <a class="btn btn-primary" href="blog-post.html">Read More <i class="fa fa-angle-right"></i></a>
          </div><!-- /.post -->

          <div class="post">
            <h2 class="post-title"><a href="blog-post.html">Donec consectetur dui ipsum, in mattis dui cursus vitae</a></h2>
            <p class="post-meta">
              <i class="fa fa-calendar-o first"></i> January 03, 2013
              <i class="fa fa-user"></i> Admin
              <i class="fa fa-comment"></i> <a href="#">8 comments</a>
            </p>
            <a href="blog-post.html" class="img-post">
              <img src="img/post3.png" alt="post 3" class="img-responsive">
            </a>
            <p>Vestibulum pulvinar lacus eget quam tempor, ultrices venenatis enim fermentum. Suspendisse in tellus sed metus auctor consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tincidunt ut quam non dapibus.</p>
            <a class="btn btn-primary" href="blog-post.html">Read More <i class="fa fa-angle-right"></i></a>
          </div><!-- /.post -->

          <div class="text-center">
            <ul class="pagination">
              <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
            </ul>
          </div><!-- /.text-center -->

        </div>

        <div class="col-md-4 col-sm-4 sidebar">
          <div class="well">
            <h4>Search</h4>
            <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
              </span>
            </div><!-- /input-group -->
          </div><!-- /.well -->

          <div class="well">
            <h4>Categories</h4>
            <ul class="nav nav-stacked nav-pills">
              <li><a href="#">Lorem</a></li>
              <li><a href="#">Ipsum</a></li>
              <li><a href="#">Dolor</a></li>
              <li><a href="#">Sit</a></li>
              <li><a href="#">Amet</a></li>
              <li><a href="#">Consectetur</a></li>
            </ul>
          </div><!-- /.well -->


          <ul class="nav nav-tabs" id="widgetTab">
            <li class="active"><a href="#latest-news" data-toggle="tab">Recent News</a></li>
            <li><a href="#popular-news" data-toggle="tab">Popular News</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane fade in active list-posts" id="latest-news">
              <ul>
                <li><a href="#"><i class="fa fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing</a></li>
                <li><a href="#"><i class="fa fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing</a></li>
                <li><a href="#"><i class="fa fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing</a></li>
              </ul>
            </div>
            <div class="tab-pane fade list-posts" id="popular-news">
              <ul>
                <li><a href="#"><i class="fa fa-caret-right"></i> Praesent convallis a risus eget cursus. Phasellus ultrices laoreet lacus semper cursus. Nam vitae luctus sapien, a hendrerit nunc</a></li>
                <li><a href="#"><i class="fa fa-caret-right"></i> Praesent convallis a risus eget cursus. Phasellus ultrices laoreet lacus semper cursus. Nam vitae luctus sapien, a hendrerit nunc</a></li>
                <li><a href="#"><i class="fa fa-caret-right"></i> Praesent convallis a risus eget cursus. Phasellus ultrices laoreet lacus semper cursus. Nam vitae luctus sapien, a hendrerit nunc</a></li>
              </ul>
            </div>
          </div><!-- /.tab-content -->


          <div class="well">
            <h4>Tags</h4>
            <div class="tags">
              <a href="#">lorem</a>
              <a href="#">ipsum</a>
              <a href="#">dolor</a>
              <a href="#">sit</a>
              <a href="#">amet</a>
              <a href="#">consectetur</a>
              <a href="#">adipiscing</a>
              <a href="#">elit</a>
              <a href="#">donec</a>
              <a href="#">pulvinar</a>
            </div><!-- /tags -->
          </div><!-- /.well -->

          
        </div><!-- /.sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer>
      <div class="container">

        <div class="row">
          <div class="col-lg-3 col-md-3">
            <a class="footer-brand" href="index.html">Banzhow</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing. Sed est quam, pretium a vestibulum vel, aliquam vitae eros.</p>
            <ul class="list-inline list-unstyled social-networks">
              <li>
                <a href="#">
                  <div class="icon-social icon-social-facebook normal">
                    <i class="fa fa-facebook"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-facebook"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="icon-social icon-social-twitter normal">
                    <i class="fa fa-twitter"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-twitter"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="icon-social icon-social-google-plus normal">
                    <i class="fa fa-google-plus"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-google-plus"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="icon-social icon-social-youtube normal">
                    <i class="fa fa-youtube-play"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-youtube-play"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="icon-social icon-social-linkedin normal">
                    <i class="fa fa-linkedin"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-linkedin"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="#">
                  <div class="icon-social icon-social-pinterest normal">
                    <i class="fa fa-pinterest"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-pinterest"></i>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-3">
            <h3>CONTACT</h3>
            <address>
              <i class="fa fa-map-marker"></i> 123 My Street, Banzhow City, CA 4567<br>
              <i class="fa fa-phone"></i> (123) 456-7890<br>
              <i class="fa fa-envelope"></i> info@banzhow.com
            </address>
          </div>
          
          <div class="col-lg-3 col-md-3">
            <h3>LATEST TWEETS</h3>
            <ul class="latest-tweets">
              <li>
                <i class="fa fa-twitter"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing
              </li>
              <li>
                <i class="fa fa-twitter"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing
              </li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-3">
            <h3>NEWSLETTER</h3>
            <p>Type your email address below and subscribe to our newsletter</p>
            <div class="input-group">
              <input type="text" placeholder="Email" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Go!</button>
              </span>
            </div><!-- /input-group -->
          </div>
        </div><!-- /.row -->

      </div><!-- /.container -->
    </footer>

    <div class="footer-after">
      <div class="container">
        <div class="row">
          <p class="col-md-10">©2014 All rights reserved. Designed by John Doe.</p>
          <p class="col-md-2 legal"><a href="#" rel="nofollow">Legal Notice</a></p>
        </div><!-- /.row -->
      </div>
    </div>

    

  </body>
</html>
